<template>
	<div>
		<div id="areaChart" style="width: 100%; height: 230px"></div>
	</div>
</template>

<script>
import * as echarts from "echarts";
export default {
	data() {
		return {
			list: [
				{ value: 20, name: "北京" },
				{ value: 26, name: "上海" },
				{ value: 16, name: "广州" },
				{ value: 15, name: "深圳" },
				{ value: 13, name: "成都" },
				{ value: 10, name: "重庆" }
			],
			colorList: ["#cebc57", "#ce7957", "#71ac9e", "#698cac", "#c9b284", "#b16c5b"]
		};
	},
	mounted() {
		this.onAreaChart();
	},
	methods: {
		onAreaChart() {
			// const data = [];
			// const dataLabel = [];
			// for (let i = 0; i < this.list.length; i++) {
			// 	data.push(this.list[i].value);
			// }
			const option = {
				tooltip: {
					trigger: "item"
				},
				legend: {
					orient: "vertical",
					top: "middle",
					right: "20%",
					align: "left"
				},
				series: [
					{
						type: "pie",
						name: "访问分布",
						// 设置饼图位置
						center: ["40%", "50%"],
						radius: ["40%", "70%"],
						avoidLabelOverlap: false,
						itemStyle: {
							borderWidth: 5,
							borderColor: "transparent",
							color: (params) => {
								return this.colorList[params.dataIndex];
							}
						},
						label: {
							show: false
						},
						labelLine: {
							show: false
						},
						data: this.list
					}
				]
			};
			const visitChart = echarts.init(document.getElementById("areaChart"));
			visitChart.setOption(option, true);
			window.addEventListener("resize", function () {
				visitChart.resize();
			});
		}
	}
};
</script>

<style>
.cd {
	color: #ce7957;
}
</style>
